<template>
  <div>
    {{ formModel }}
    <el-form
      ref="form"
      :model="formModel"
      :show-message="false"
    >
      <el-form-item label="下拉框" prop="aaa" :rules="{ required: true }">
        <kunkka-integration-select
          :model="formModel"
          prop="aaa"
          @selectChange="selectChange"
        />
      </el-form-item>
      <el-form-item label="带搜索下拉框" prop="bbb" :rules="{ required: true }">
        <kunkka-integration-select
          :model="formModel"
          prop="bbb"
          @selectChange="selectChange"
        />
      </el-form-item>
      <el-form-item label="带建议输入框" prop="ccc" :rules="{ required: true }">
        <kunkka-autocomplete-input
          :model="formModel"
          :item="{
            prop: 'ccc',
            disable: false,
            size: 'mini',
            placeholder: '请输入',
            optionlist: [
              { cKeyname:'one', cKeynumb:'1' },
              { cKeyname:'two', cKeynumb:'2' }
            ]
          }"
          @change="autoChange"
        />
      </el-form-item>
    </el-form>
    <el-row>
      <el-button @click="submit">确定</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formModel: {
        // aaa: '',
        // bbb: ''
      },
      model: {
        kkk: ''
      }
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.formModel)
        } else {
          return false
        }
      })
    },
    selectChange(data, child) {
      console.log(data, child)
    },
    handleChange(data, that) {
      console.log(data, that)
    },
    remoteEmit(data, callback) {
      console.log(data)
      callback([
        {
          cKeyname: String(Math.floor(Math.random() * 1000)),
          cKeynumb: String(Math.floor(Math.random() * 1000))
        }
      ])
    },
    autoChange(val) {
      console.log(val)
    }
  }
}
</script>
